<!-- pages/community/detail.vue -->
<template>
  <view class="container">
    <!-- 帖子内容区 -->
    <view class="post-container">
      <!-- 用户信息 -->
      <view class="user-info">
        <image :src="post.userAvatar" class="avatar"></image>
        <view class="user-detail">
          <text class="username">{{post.username}} 📚</text>
          <text class="post-time">{{post.createTime}} · 考研人在线</text>
        </view>
      </view>

      <!-- 帖子内容 -->
      <view class="post-content">
        <text class="post-title">{{post.title}} ✨</text>
        <text class="post-text">{{post.content}}</text>
        <view class="topic-tags">
          <text class="tag"># 高数重难点 📊</text>
          <text class="tag"># 考研复习 📝</text>
        </view>
        <view class="post-images" v-if="post.images && post.images.length">
          <image 
            v-for="(img, index) in post.images" 
            :key="index" 
            :src="img" 
            class="content-image"
            mode="aspectFill"
            @click="previewImage(index)"
          ></image>
        </view>
      </view>

      <!-- 互动栏 -->
      <view class="interaction-bar">
        <view class="like-btn" @click="handleLike">
          <text class="iconfont" :style="{ color: post.isLiked ? '#A8BF8F' : '#666' }">{{post.isLiked ? '❤️' : '🤍'}}</text>
          <text class="count">{{post.likes}} 赞</text>
        </view>
        <view class="comment-btn">
          <text class="iconfont">💭</text>
          <text class="count">{{post.comments.length}} 条评论</text>
        </view>
        <view class="share-btn">
          <text class="iconfont">🔗</text>
          <text class="count">分享</text>
        </view>
      </view>
    </view>

    <!-- 评论区 -->
    <view class="comments-section">
      <text class="section-title">💬 精彩评论 ({{post.comments.length}})</text>
      <view class="comment-list">
        <view 
          class="comment-item" 
          v-for="(comment, index) in post.comments" 
          :key="index"
        >
          <image :src="comment.userAvatar" class="comment-avatar"></image>
          <view class="comment-content">
            <text class="comment-username">{{comment.username}} {{index === 0 ? '👑' : ''}}</text>
            <text class="comment-text">{{comment.content}}</text>
            <view class="comment-footer">
              <text class="comment-time">{{comment.createTime}}</text>
              <view class="comment-actions">
                <text class="action-btn">👍 赞</text>
                <text class="action-btn">↩️ 回复</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 评论输入框 -->
    <view class="comment-input-section">
      <input 
        type="text" 
        v-model="newComment"
        placeholder="写下你的想法，参与讨论... ✍️"
        class="comment-input"
      />
      <button 
        class="submit-btn" 
        :style="{ backgroundColor: '#A8BF8F' }"
        @click="submitComment"
      >发送 ✨</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      post: {
        userAvatar: '/static/my/柯南.png',
        username: '考研人@张三',
        createTime: '2024-12-30 10:30',
        title: '数学一高数知识点总结分享',
        content: '📚 经过这段时间的复习，我整理了一些高数重要知识点，希望能帮助到大家！\n\n💡 重点内容包括：\n1. 极限与连续性的关键概念\n2. 导数与微分的应用技巧\n3. 定积分与不定积分的解题思路\n4. 多元函数微分学的核心要点\n\n🎯 这些内容都是根据历年真题和考研大纲进行总结的，建议大家重点关注。欢迎在评论区交流讨论，一起进步！\n\n📖 另外，我也整理了一份详细的复习计划，感兴趣的同学可以私信我。\n\n💪 愿我们都能在考研路上互帮互助，最终取得理想的成绩！',
        images: [
          '/static/post-img1.png',
          '/static/post-img2.png'
        ],
        likes: 128,
        isLiked: false,
        comments: [
          {
            userAvatar: '/static/my/男孩.png',
            username: '考研人@李四',
            content: '总结得非常详细，特别是微积分部分的知识点很有帮助！期待你分享更多考研经验 💪',
            createTime: '10分钟前'
          },
          {
            userAvatar: '/static/my/男孩.png',
            username: '考研人@王五',
            content: '请问积分部分的笔记可以分享一下吗？正好最近在攻克这块难点 🙏',
            createTime: '5分钟前'
          }
        ]
      },
      newComment: ''
    }
  },
  methods: {
    handleLike() {
      this.post.isLiked = !this.post.isLiked
      this.post.likes += this.post.isLiked ? 1 : -1
      
      // 添加点赞反馈
      uni.showToast({
        title: this.post.isLiked ? '已点赞 ❤️' : '已取消点赞',
        icon: 'none'
      })
    },
    submitComment() {
      if (!this.newComment.trim()) {
        uni.showToast({
          title: '请输入评论内容 ✍️',
          icon: 'none'
        })
        return
      }

      // 添加新评论
      this.post.comments.unshift({
        userAvatar: '/static/avatar-default.png',
        username: '我',
        content: this.newComment,
        createTime: '刚刚'
      })

      // 清空输入框
      this.newComment = ''

      // 提示发送成功
      uni.showToast({
        title: '评论成功 ✨',
        icon: 'success'
      })
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.post.images,
        current: index
      })
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.post-container {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.user-detail {
  flex: 1;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.post-time {
  font-size: 24rpx;
  color: #999;
}

.post-content {
  padding: 20rpx 0;
}

.post-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.post-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.8;
  margin-bottom: 20rpx;
  white-space: pre-wrap;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.tag {
  font-size: 26rpx;
  color: #A8BF8F;
  background-color: rgba(168, 191, 143, 0.1);
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}

.post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.content-image {
  width: 220rpx;
  height: 220rpx;
  border-radius: 8rpx;
}

.interaction-bar {
  display: flex;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.like-btn, .comment-btn, .share-btn {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}

.iconfont {
  font-size: 40rpx;
  margin-right: 10rpx;
  color: #666;
}

.count {
  font-size: 28rpx;
  color: #666;
}

.comments-section {
  background-color: #fff;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.comment-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 20rpx;
}

.comment-content {
  flex: 1;
}

.comment-username {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.comment-text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  line-height: 1.6;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-time {
  font-size: 24rpx;
  color: #999;
}

.comment-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  font-size: 24rpx;
  color: #666;
}

.comment-input-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #eee;
}

.comment-input {
  flex: 1;
  height: 72rpx;
  background-color: #f5f5f5;
  border-radius: 36rpx;
  padding: 0 30rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
}

.submit-btn {
  width: 160rpx;
  height: 72rpx;
  border-radius: 36rpx;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>